// 配置Tailwind自定义主题
tailwind.config = {
    theme: {
        extend: {
            colors: {
                primary: '#165DFF',
                secondary: '#36CFC9',
                accent: '#722ED1',
                neutral: '#F5F7FA',
                dark: '#1D2129'
            },
            fontFamily: {
                inter: ['Inter', 'system-ui', 'sans-serif'],
            },
        }
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    // 验证用户登录状态
    const loginEmail = localStorage.getItem('currentLoginEmail');
    if (!loginEmail) {
        window.location.href = 'index.html';
        return;
    }
    
    // 获取用户信息并显示
    const users = JSON.parse(localStorage.getItem('registeredUsers')) || [];
    const currentUser = users.find(user => user.email === loginEmail);
    if (currentUser) {
        document.getElementById('user-display-name').textContent = currentUser.name;
        document.getElementById('header-avatar').src = currentUser.avatar || 'https://picsum.photos/id/64/200/200';
    }
    
    // 初始化图表
    initActivityTrendChart();
    initActivityTypeChart();
    
    // 绑定退出登录事件
    document.getElementById('logout-button').addEventListener('click', function() {
        localStorage.removeItem('currentLoginEmail');
        window.location.href = 'index.html';
    });
    
    // 移动端菜单切换
    document.getElementById('mobile-menu-button').addEventListener('click', function() {
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenu.classList.toggle('hidden');
    });
    
    // 用户菜单切换
    document.getElementById('user-menu-button').addEventListener('click', function() {
        const userMenu = document.getElementById('user-menu-dropdown');
        userMenu.classList.toggle('hidden');
    });
    
    // 点击页面其他区域关闭下拉菜单
    document.addEventListener('click', function(event) {
        const userMenuButton = document.getElementById('user-menu-button');
        const userMenu = document.getElementById('user-menu-dropdown');
        
        if (!userMenuButton.contains(event.target) && !userMenu.contains(event.target)) {
            userMenu.classList.add('hidden');
        }
    });
});

// 初始化活动参与趋势图
function initActivityTrendChart() {
    const ctx = document.getElementById('activityTrendChart').getContext('2d');
    
    // 月份标签
    const months = ['1月', '2月', '3月', '4月', '5月', '6月'];
    
    // 模拟数据
    const participationData = [2, 3, 5, 4, 5, 5];
    const rewardData = [200, 350, 600, 450, 700, 860];
    
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: months,
            datasets: [
                {
                    label: '参与活动数',
                    data: participationData,
                    backgroundColor: 'rgba(22, 93, 255, 0.7)',
                    borderColor: 'rgba(22, 93, 255, 1)',
                    borderWidth: 1,
                    yAxisID: 'y'
                },
                {
                    label: '获得积分',
                    data: rewardData,
                    backgroundColor: 'rgba(114, 46, 209, 0.5)',
                    borderColor: 'rgba(114, 46, 209, 1)',
                    borderWidth: 1,
                    type: 'line',
                    yAxisID: 'y1'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    title: {
                        display: true,
                        text: '参与活动数'
                    },
                    min: 0,
                    ticks: {
                        precision: 0
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    title: {
                        display: true,
                        text: '获得积分'
                    },
                    min: 0,
                    grid: {
                        drawOnChartArea: false
                    }
                }
            }
        }
    });
}

// 初始化活动类型分布图
function initActivityTypeChart() {
    const ctx = document.getElementById('activityTypeChart').getContext('2d');
    
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['公益活动', '技术分享', '文体活动', '知识竞赛', '线上活动'],
            datasets: [{
                data: [8, 5, 4, 3, 4],
                backgroundColor: [
                    'rgba(54, 207, 201, 0.7)',
                    'rgba(22, 93, 255, 0.7)',
                    'rgba(255, 159, 64, 0.7)',
                    'rgba(114, 46, 209, 0.7)',
                    'rgba(75, 192, 192, 0.7)'
                ],
                borderColor: [
                    'rgba(54, 207, 201, 1)',
                    'rgba(22, 93, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(114, 46, 209, 1)',
                    'rgba(75, 192, 192, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right'
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.raw || 0;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = Math.round((value / total) * 100);
                            return `${label}: ${value}次 (${percentage}%)`;
                        }
                    }
                }
            },
            cutout: '60%'
        }
    });
}
